<template>
    <div class="creationteam">
        <pagetitle></pagetitle>
        <el-card class="topcard">
            <div class="creationTip">
                <img src="@/assets/image/teamhand.png" alt="" srcset="" class="creationTipimg" />
                <div>
                    <div class="topTip">还差一步即可 <span>创建团队</span></div>
                    <div class="bottomTip">企业信息仅用于进行登记，不会泄露您的任何证件信息</div>
                </div>
            </div>
        </el-card>
        <el-form :model="formInline" class="demo-form-inline" label-width="130px">
            <el-card class="topcard">
                <div class="pagecontents">
                    <div class="formSeetion">团队主体信息</div>
                    <el-form-item label="团队名称：">
                        <div class="formItems">
                            <el-input v-model="formInline.companyName" class="inputs" placeholder="请输入创建团队的全称"></el-input>
                            <el-button type="primary" plain @click="detection">检测</el-button>
                        </div>
                    </el-form-item>
                    <el-form-item label="团队简称：">
                        <div class="formItems">
                            <el-input v-model="formInline.companyPresentation" class="inputs" placeholder="请输入创建团队的简称"></el-input>
                            <el-button type="primary" plain @click="detection">检测</el-button>
                            <div class="formItemTip">*简称用于平台显示实名认证团队的简称</div>
                        </div>
                    </el-form-item>
                </div>
            </el-card>
            <el-card class="topcard">
                <div class="pagecontents">
                    <div class="formSeetion">创建人岗位</div>
                    <el-form-item label="您的身份：">
                        <div>
                            <el-radio-group v-model="formInline.createUserPost" size="large">
                                <div class="radiobutton" v-for="(item, index) in cardType" :key="index">
                                    <el-radio-button :label="item" />
                                </div>
                            </el-radio-group>
                            <div class="creationteamTips">
                                * 声明：在整个 <u>实名认证</u> 过程中，该 <u>授权管理员</u> 的一切行为，均代表本单位，与本单位的行为具有同等法律效力。<br />
                                <span>本单位将承担该代理人行为的全部法律后果和法律责任。</span>
                            </div>
                        </div>
                    </el-form-item>
                </div>
            </el-card>
            <el-card class="topcard">
                <div class="pagecontents">
                    <div class="formSeetion">团队法人信息</div>
                    <el-form-item label="法定代表人姓名：">
                        <el-input v-model="formInline.createUserName" class="inputs" placeholder="请输入或者自动填入法人姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="法人联系电话：">
                        <el-input v-model="formInline.createUserPhone" class="inputs" placeholder="请输入或者自动填入法人的联系电话"></el-input>
                        <div class="formItemTips">*联系电话必须为法人本人</div>
                    </el-form-item>
                </div>
            </el-card>
            <el-card class="topcard">
                <div class="pagecontents">
                    <div class="formSeetion">申请人组织机构类型</div>
                    <el-form-item label="机构分类：">
                        <div class="inputs selectBox">
                            <el-select v-model="formInline.companyNature1" class="selectItem" placeholder="请选择">
                                <el-option label="一级" value="一级" />
                            </el-select>
                            <el-select v-model="formInline.companyNature2" class="selectItem" placeholder="请选择">
                                <el-option label="一级" value="一级" />
                            </el-select>
                            <el-select v-model="formInline.companyNature3" class="selectItem" placeholder="请选择">
                                <el-option label="一级" value="一级" />
                            </el-select>
                        </div>
                        <div class="formItemTips">*参考标准：GB/T 20091-2006 组织机构类型</div>
                    </el-form-item>
                    <el-form-item label="说明：">
                        <el-input v-model="formInline.companyNatureExplain" type="textarea" :rows="4" resize="none" class="inputs" placeholder="自动导入组织机构类型说明"></el-input>
                    </el-form-item>
                </div>
            </el-card>
            <el-card class="topcard">
                <div class="pagecontents">
                    <div class="formSeetion">申请人产业分类</div>
                    <el-form-item label="">
                        <el-tag class="mx-1 formitemtag" size="large" closable type="info">科学研究和技术服务业/专业技术服务业/检测服务 </el-tag>
                        <el-tag class="mx-1 formitemtag" size="large" closable type="info">科学研究和技术服务业/专业技术服务业/检测服务 </el-tag>
                        <el-tag class="mx-1 formitemtag" size="large" closable type="info">科学研究和技术服务业/专业技术服务业/检测服务 </el-tag>
                        <el-tag class="mx-1 formitemtag" size="large" closable type="info">科学研究和技术服务业/专业技术服务业/检测服务 </el-tag>
                        <el-tag class="mx-1 formitemtag" size="large" closable type="info">科学研究和技术服务业/专业技术服务业/检测服务 </el-tag>
                        <el-tag class="mx-1 formitemtag" size="large" closable type="info">科学研究和技术服务业/专业技术服务业/检测服务 </el-tag>
                        <span class="formitemtagspan">（可多选）</span>
                    </el-form-item>
                    <el-form-item label="产业分类：">
                        <div class="formItemTipsBox selectBox">
                            <el-select v-model="formInline.industryClassify1" class="selectItem" placeholder="请选择">
                                <el-option label="门类" value="门类" />
                            </el-select>
                            <el-select v-model="formInline.industryClassify2" class="selectItem" placeholder="请选择">
                                <el-option label="大类" value="大类" />
                            </el-select>
                            <el-select v-model="formInline.industryClassify3" class="selectItem" placeholder="请选择">
                                <el-option label="中类" value="中类" />
                            </el-select>
                            <el-select v-model="formInline.industryClassify4" class="selectItem" placeholder="请选择">
                                <el-option label="小类" value="小类" />
                            </el-select>
                            <!-- <el-button type="primary">添加</el-button> -->
                            <el-button type="primary" plain>添加</el-button>
                        </div>
                        <div class="formItemTips">*参考标准：GB/T 20091-2006 组织机构类型</div>
                    </el-form-item>
                    <el-form-item label="说明：">
                        <el-input v-model="formInline.industryClassifyExplain" type="textarea" :rows="4" resize="none" class="inputs" placeholder="自动导入组织机构类型说明"></el-input>
                    </el-form-item>
                    <div class="subpageBtnBox">
                        <el-button type="primary" plain @click="submit">创建团队</el-button>
                        <el-button type="primary" plain>返回</el-button>
                    </div>
                </div>
            </el-card>
            <!-- <el-card class="topcard">
                <div class="pageBtns pagecontents">
                    <el-button type="primary" plain @click="submit">创建团队</el-button>
                    <el-button type="primary" plain>返回</el-button>
                </div>
            </el-card> -->
        </el-form>

        <!-- 创建成功弹窗 -->
        <!-- v-if="succeedMask" -->
        <div class="pageMask">
            <div class="pageMaskCont">
                <div class="pageMaskTitle">创建成功</div>
                <img src="@/assets/image/setsucceed.png" alt="" srcset="" class="setsucceedimg set-left-center" />
                <div class="pageMaskTip1">已成功创建 {{ formInline.companyName }}公司</div>
                <div class="pageMaskTip2">您已成功创建团队，如需开通更多功能，请前往实名认证</div>
                <div class="pageMaskBtns">
                    <el-button type="primary" size="medium" @click="$router.push('/team/teammanagement/teamattestation')">实名认证</el-button>
                    <el-button size="medium" @click="$router.push('/team/myteam')">完成</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
const succeedMask = "";
const addResskey = "";
const cardType = ref(["法定代表人", "授权管理员"]);
let formInline: any = reactive({
    companyName: "", // 公司名称
    companyPresentation: "", // 公司简介
    companyLogo: "", // 公司logo
    organizationCode: "", // 组织机构代码
    businessLicense: "", // 营业执照
    platformNumber: "", // 平台编号
    companyNature: "", // 公司性质
    registeredAddress: "", // 公司地址
    addressCode: "", // 公司地址code
    detailedAddress: "", // 详细地址
    createUserName: "", // 公司创建者的名字，模式使用登录人的用户名
    createUserPhone: "", // 公司创建者的电话
    ///////////////////////////////////////////////////////////////////////
    createUserPost: "法定代表人",
    // 公司性质
    companyNature1: "",
    companyNature2: "",
    companyNature3: "",
    companyNatureExplain: "",
    //产业分类
    industryClassify1: "",
    industryClassify2: "",
    industryClassify3: "",
    industryClassify4: "",
    industryClassifyExplain: "",
});

const submit = () => {
    ElMessage.warning("接口缺少必要参数");
};
const detection = () => {
    ElMessage.warning("缺少该接口");
};
const updatecompanyinfo = () => {};
const getAreaData = (a: any) => {
    console.log(a, "987897897897987897897");
};
// const uploadFileUrl = () => {};
const selectidentity = (i: number) => {
    formInline.identity = i;
};
// console.log($request);

// export default {
//     data() {
//         return {
//             formInline: {
//                 identity: 1,
//             },
//             succeedMask: false,
//             addResskey: new Date().getTime(),
//         };
//     },
//     methods: {
//         selectidentity(i) {
//             this.formInline.identity = i;
//         },
//         // 上传公司logo
//         uploadFileUrl(imageUrl) {
//             this.formInline.companyLogo = imageUrl;
//         },
//         // 修改公司地址
//         getAreaData(data) {
//             this.formInline.addressCode = data.keyText;
//             this.formInline.registeredAddress = data.valueText;
//         },
//         // 修改公司信息
//         updatecompanyinfo() {
//             this.$request.post(this.$newapi.companySave, this.formInline).then((res) => {
//                 if (res.code == 200) {
//                     this.succeedMask = true;
//                 }
//             });
//         },
//     },
// };
</script>
<style lang="scss" scoped>
.topcard {
    margin-bottom: 20px;
}
.creationTip {
    // background: #ffffff;
    // box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.1);
    padding: 0 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .creationTipimg {
        width: 56px;
        height: 56px;
        margin-right: 25px;
    }
    .topTip {
        font-size: 16px;
        color: #333333;
        span {
            color: #23b14d;
            margin-left: 10px;
            cursor: pointer;
        }
    }
    .bottomTip {
        font-size: 12px;
        color: #666666;
        margin-top: 10px;
    }
}
.pagecontents {
    // padding: 0 20px;
    .formSeetion {
        margin-top: 10px;
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: bold;
        color: #252b3a;
        &:first-child {
            margin-top: 0;
        }
        span {
            font-size: 12px;
            color: #999999;
            font-weight: 400;
            margin-left: 20px;
        }
    }
    .formItems {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .formItemTip,
    .formItemTips {
        font-size: 12px;
        color: #999999;
        margin-left: 10px;
    }
    .formItemTips {
        margin-left: 0;
    }
    .creationteamTips {
        font-size: 12px;
        color: #f44444;
        margin-top: 10px;
        line-height: 16px;
        span {
            padding-left: 45px;
        }
        u {
            cursor: pointer;
        }
    }
    .selectBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .selectItem {
            width: 162px;
        }
    }
    .formitemtag {
        margin-right: 10px;
        margin-bottom: 10px;
    }
    .formitemtagspan {
        font-size: 12px;
        margin-top: -12px;
        color: #999999;
    }
    .formItemTipsBox {
        width: 747px;
        margin-right: 10px;
    }
}
// .pageBtns {
//     padding-left: 130px;
// }
.inputs {
    width: 500px;
    margin-right: 10px;
}
</style>
<style>
.creationteam .radiobutton {
    width: 162px;
    height: 30px;
    border-radius: 4px;
    margin-right: 10px;
}
.creationteam .radiobutton .el-radio-button .el-radio-button__inner {
    height: 30px;
    line-height: 30px;
    text-align: center;
    padding: 0;
    width: 162px;
    border: none;
    background: #f1f1f1;
}
.creationteam .radiobutton .el-radio-button.is-active .el-radio-button__inner {
    background: #23b14d;
}
</style>
